<!doctype html>
<html >
<head>
	<meta charset="UTF-8">
	<title>文件上传-RPA机器人工作台</title>
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
	<link rel="stylesheet" href="/rpa_work/static/css/xadmin.css?v=1.01">
    <script type="text/javascript" src="/rpa_work/static/js/jquery.min.js"></script>
    <script type="text/javascript" src="/rpa_work/static/js/jquery.cookie.js"></script>
    <script src="/rpa_work/static/layui/layui.js?v=2.6.8" charset="utf-8"></script>
    <script>var page="filelist";</script>
	<script type="text/javascript" src="/rpa_work/static/js/xadmin.js?v=1.0"></script>
	<script type="text/javascript" charset="utf-8" src="/rpa_work/static/js/xm-select.js"></script>
    <script type="text/javascript" src="/rpa_work/static/js/target_window.js"></script>
</head>
    <body>
        <div class="x-body">
        
		<div class="layui-card">
		  <div class="layui-card-body">
		    	<div class="layui-row">
					<form class="layui-form layui-col-md12 x-so layui-form-pane" method="get" id="myform">
                      <div class="form-item layui-inline">
                        <label class="layui-form-label">任务名称</label>
                        <div class="layui-input-block">
                          <input type="text" name="flow_name" placeholder="请输入任务名称" autocomplete="off" class="layui-input">
                        </div>
                      </div>
                      <div class="form-item layui-inline">
                        <label class="layui-form-label">文件名称</label>
                        <div class="layui-input-block">
                          <input type="text" name="file_name" placeholder="请输入文件名称" autocomplete="off" class="layui-input">
                        </div>
                      </div>
					  <div class="form-item layui-inline">
                          <div class="layui-input-inline">
                          <a class="layui-btn"  lay-submit="" lay-filter="search">查询</a>
                          </div>
                      </div>
                      <a class="layui-btn layui-inline x-right" title="新建文件" onclick="x_admin_show('新建文件','/rpa_work/static/page/addfile.html','600','350')">新建文件</a>
					</form>
                    
				</div>

        
		
		
			<table class="layui-hide" lay-data="{id: 'list_table'}" id="list_table" lay-filter="list_table"></table>
		  </div>
		</div>
      </div>

<script type="text/html" id="localurl">
  <input type="text" name="localurl" id="localurl-{{d.id}}" value="" autocomplete="off" class="layui-input">
</script>
<script type="text/html" id="filename">
  <div id="filename-{{d.id}}">{{d.file_name}}</div>
</script>
<script type="text/html" id="serverurl">
{{#  if(d.save_path == null){ }}
  <input type="text" name="serverurl" id="serverurl-{{d.id}}" value="" autocomplete="off" class="layui-input">
{{#  } else{ }}
	<input type="text" name="serverurl" id="serverurl-{{d.id}}" value="{{d.save_path}}" autocomplete="off" class="layui-input">
{{#  } }}
</script>
<script type="text/html" id="state">
  <div id="state-{{d.id}}">
  {{#  if(d.save_path != '' ){ }}
  已上传
  {{#  } }}
</div>
</script>
<script type="text/html" id="rightbar">
<button class="layui-btn layui-btn-sm selectfile_btn" lay-event="selectfile">编辑</button>
<input type="file" id="uploadfile-{{d.id}}" name="file" style="display:none;" />
	<button class="layui-btn layui-btn-sm upload_btn" lay-event="delete">删除</button>
	<div class="layui-progress progress-{{d.id}}" lay-showPercent="yes" lay-filter="progress-{{d.id}}" style="display:none;">
	<div class="layui-progress-bar layui-bg-blue" lay-percent="0%"></div>
	</div>
</script>   
		<script>
	    layui.use(['form','laypage','layer','table','upload'], function(){
                $ = layui.jquery;
              var layer = layui.layer;
			  var form = layui.form;
			  var table = layui.table;
			  var upload = layui.upload;

			  table.render({
				elem: '#list_table'
				,height: 600
				//,width:1000
				,cellMinWidth: 60
				,url: apiurl+'file/history'
				,method:'post'
				,contentType: 'application/json'
				,where: {'sid': sid}
				,response: {
				  statusName: 'status'
				} 
				,page: true
				//,size:'lg'
				,page: { 
				  layout: ['count', 'prev', 'page', 'next', 'refresh']
				  ,groups: 5 
				  ,first: true
				  ,last: true
				  ,limit:100
				  ,first: '首页'
				  ,last: '尾页'
				}
				,cols: [[ //表头
				  {field: 'flow_name', title: '任务名称',align:'center',minWidth:150},
				  {field: 'file_name', title: '文件名称',templet:'#filename',align:'center',minWidth:200},
				  {field: 'file_type', title: '文件类型',align:'center',width:100},
				  {field: '', title: '状态',align:'center',templet:'#state',width:120},
				  {field: 'localurl', title: '本地文件',align:'center', templet: '#localurl',minWidth:200},
				  {field: 'save_path', title: '远程路径',align:'center', templet: '#serverurl',minWidth:300},
				  {field: '', title: '操作',align:'center',toolbar: '#rightbar',width:180,fixed:'right'}
				]]
				,done: function(res, curr, count){
				  	checklogin(res);
				}
			  });

			    table.on('tool(list_table)', function(obj){
					var data = obj.data; //获得当前行数据
					var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
					var tr = obj.tr; //获得当前行 tr 的DOM对象
					
					switch(layEvent){
					  case 'selectfile':
						 let fileid=data.id;
						 let flowid=data.flow_id;
						 //let ext=data.file_type;
						
						upload.render({
						  elem: '#uploadfile-'+fileid
						  ,url: apiurl+'FileUpload'
						  ,accept: 'file'
						 // ,exts:ext
						  ,choose: function(obj){
							//预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
							obj.preview(function(index, file, result){
							  $('#localurl-'+fileid ).val(file.name);
							});
							element.progress('progress-'+fileid, 0);
							$('#state-'+fileid ).html('已选择文件');
							
						  }
						  ,before: function(obj){
							var that = this;
							layer.load();
							var file_name;	
							var files = obj.pushFile();
							$.each(files, function(index, file) {
								$('#file_name').val(file.name);
								file_name=file.name;
							});
								console.log(file_name);	
							  that.data = {  
								file_id:fileid,
								flow_id:flowid,
								sid: sid,
								'file_name': file_name
							  };
								$('#state-'+fileid ).html('上传中');
								$('.progress-'+fileid ).show();
						  }
						,progress: function(n, elem) {
							var percent = n + '%' //获取进度百分比
							element.progress('progress-'+fileid, percent);
						}
						,done: function (res) {
							if(res.status == 0 ){
								//上传成功
								$('#serverurl-'+fileid ).val(res.data[0].save_path);
								$('#filename-'+fileid ).html(res.data[0].file_name);
								$('#state-'+fileid ).html('成功');
								layer.closeAll('loading'); 
								layer.msg("上传成功");
							}else{
								layer.closeAll('loading');
								layer.msg(res.msg);
								$('#state-'+fileid ).html('<span class="layui-font-red">失败</span>');
								
							}
	
						}
						  ,error: function(index, upload){
							layer.closeAll('loading');
							$('#state-'+fileid ).html('<span class="layui-font-red">失败</span>');
						  }
						});
						$("#uploadfile-"+fileid).click();
					  break;
					  case 'delete':
							layer.confirm('确定要删除吗？',function(index){
								  $.ajax({
									url: apiurl+"file/del",
									type: 'POST',
									dataType: 'json',
									data: JSON.stringify({'file_id':data.id,'sid':sid}),
									headers: {
										'Content-Type': 'application/json'
									},
									success: function(r) {
										if(r.status==0){
											$(tr).remove();
											layer.msg('删除成功', {icon: 1});
										}else{
											checklogin(r);
											layer.msg(r.msg,{icon: 5,time:1000});
										}
									},
									error: function(xhr, status, error) {
										layer.msg(error);
									}
								});
							
							   
							});
					  
					  break;

					  
					 
					}
				});
				form.on('submit(search)', function(data){
					let postdata=data.field;
					postdata.sid=sid;
					table.reload('list_table', {
					  url: apiurl+'file/history'
					  ,contentType: 'application/json'
					  ,where: postdata
					  ,page: {
						layout: ['count', 'prev', 'page', 'next', 'refresh']
				        ,curr: 1
					  }
					});
				   
					return false;
				  });
              
            });
	
       </script>
    </body>
</html>